<template>
  <div class="system">
    <div class="top"><span>基于物联网的花卉种植系统</span></div>
    <ul class="nav">
      <li><router-link to="/system/show" active-class="routed" class="rout">监测数据</router-link></li>
      <li><router-link to="/system/control" active-class="routed" class="rout">控制节点</router-link></li>
      <li><router-link to="/system/weather" active-class="routed" class="rout">天气预报</router-link></li>
    </ul>
    <keep-alive>
      <router-view class="contain">这里是默认路由区域</router-view>
    </keep-alive>
  </div>
</template>

<script>

  export default {
    name: 'S-Ystem',
    data() {
      return {

      }
    },

    methods: {

    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .system {
    width: 1265px;
    box-sizing: border-box;
  }

  .top {
    width: 100%;
    height: 40px;
    background-color: #4b6bc9;
  }

  .top span {
    margin: 0px auto;
    display: block;
    width: 800px;
    height: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
  }

  .nav {
    float: left;
    box-sizing: border-box;
    width: 200px;
    height: 664px;
    background-color: #000000ce;
  }

  .nav li {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #919191b0;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    color: #51679e;
  }

  .contain {
    box-sizing: border-box;
    float: right;
    width: 1065px;
    height: 664px;
    background-color: #f2c5c5;
    background-image: url(../assets/imgs/back.jpg);
    background-size: 116%;
  }

  .rout {
    text-decoration: none;
    color: #51679e;
  }

  .routed {
    color: #fff;
  }
</style>